<template>
  <div class="empower">
    <div class="top">用户授权信息</div>
    <div class="top-1">用户授权基本信息</div>
    <el-divider />
    <div class="bigbox">
      <div class="username">用户名：<input type="text" /></div>
      <div class="name">
        员工姓名：<input
          type="text"
          placeholder="输入员工姓名进行查询"
        /><button>查询</button>
      </div>
      <div class="gly">
        管理员分类：<el-select
          v-model="value1"
          class="m-2"
          placeholder="超级管理员"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="bumen">部门名称：研发部</div>
      <div class="zhiwu">职务名称：技术经理</div>
      <div>
        职务类别：<el-select
          v-model="value2"
          class="m-2"
          placeholder="请选择类别"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="shouquan">
        授权状态：<el-select
          v-model="value3"
          class="m-2"
          placeholder="启用"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="quanxian">用户权限设置</div>
    <el-divider />
    <div class="lanmu">
      <div>1、栏目权限</div>
      <!-- 多选框 -->

      <div class="bottom">
        <div class="kuang">
          <el-checkbox
            class="xiaokuang"
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >全部选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              class="dakuang"
              v-for="city in cities"
              :key="city"
              :label="city"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="ding">2、操作功能权限:</div>
        <!-- 多选框2 -->
        <div class="kuang2">
          <el-checkbox
           
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >全部选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              class="dakuang"
              v-for="city in cities1"
              :key="city"
              :label="city"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const value = ref("");
const value1 = ref([]);
const value2 = ref([]);
const value3 = ref([]);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
// 全选
// import { ref } from 'vue'

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(["Shanghai", "Beijing"]);
const cities = [
  "机构管理",
  "信息管理",
  "商机管理",
  "日志管理",
  "产品管理",
  "合同管理",
  "预约管理",
  "售后日志",
  "任务清单",
  "员工管理",
  "资料库管理",
  "统计分析",
];
const cities1 = [
  "创建",
  "编辑",
  "删除",
  "查看",
  "搜索",
  "授权",
];

// const handleCheckAllChange = (val:boolean) => {
//   checkedCities.value = val ? cities : []
//   isIndeterminate.value = false
// }
// const handleCheckedCitiesChange = (value:string[]) => {
//   const checkedCount = value.length
//   checkAll.value = checkedCount === cities.length
//   isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
// }
</script>

<style scoped>
.top {
  font-size: 20px;
  margin-bottom: 30px;
  margin-left: 400px;
}
.username {
  margin-top: 20px;
  margin-bottom: 10px;
}
.name {
  margin-bottom: 10px;
}
.gly {
  margin-bottom: 10px;
}
.bumen {
  margin-bottom: 10px;
}
.zhiwu {
  margin-bottom: 10px;
}
.shouquan {
  margin-top: 10px;
  margin-bottom: 50px;
}
.kuang {
  height: 200px;
  width: 550px;
  border: 1px dashed red;
  /* text-align: center; */
  position: relative;
}
.xiaokuang {
  position: absolute;
  left: 10px;
  /* margin-top: 20px; */
}
.dakuang {
  margin-top: 20px;
  margin-left: 20px;
}
.kuang2 {
  height: 200px;
  width: 400px;
  border: 1px dashed red;
  margin-left: 20px;
}
.bottom {
  display: flex;
  position: relative;
}
.ding {
  position: absolute;
  top: -20px;
  right: 310px;
}
</style>